<%--
  Created by IntelliJ IDEA.
  User: drad
  Date: 2021/11/1
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.10.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
</head>
<style>
    td.first {
        text-align: right;
    }

    .table>tbody>tr>td,
    .table>tbody>tr>th,
    .table>tfoot>tr>td,
    .table>tfoot>tr>th,
    .table>thead>tr>td,
    .table>thead>tr>th {
        vertical-align: middle;
    }

    .form-control {
        width: 200px;
    }

</style>

<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div
            class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
        <form action="${pageContext.request.contextPath}/sys/user/updateUser" id="updateFrom" enctype="multipart/form-data" method="post">
            <table class="table">
                <tbody>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">ID：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">${sessionScope.user.id}</td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">用户名：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">${sessionScope.user.username}</td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">昵称：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">
                        <input type="text" name="nick" id="nick" class="form-control" maxlength="15" value="${sessionScope.user.nick}"
                               required="required">
                    </td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">头像：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">
                        <img src="http://192.168.2.149:9000/${sessionScope.user.pic}" id="pic" class="img-circle img-thumbnail">
                        <input type="file" name="picFile" id="picFile" accept="image/jpeg,image/png,image/gif">
                        <p class="help-block">支持JPG、PNG等格式，大小为2MB以下。</p>
                    </td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">性别：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">
                        <select name="sex" id="sex" class="form-control" required="required">
                            <option value="保密">保密</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first">生日：</td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">
                        <input type="date" name="birthday" id="birthday" class="form-control" value="${sessionScope.user.birthday}" required="required">
                    </td>
                </tr>
                <tr>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 first"></td>
                    <td class="col-xs-8 col-sm-8 col-md-8 col-lg-8 last">
                        <button id="update" type="submit" class="btn btn-primary">更新信息</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>
</body>
<script>
    $('#picFile').change(function () {
        let fileTypes = [".jpg", ".png", ".gif"];
        let filePath = $(this).val();
        let fileSize = this.files[0].size;
        let file = $(this)[0].files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
        if (filePath) {
            let fileEnd = filePath.substring(filePath.lastIndexOf("."))
            if (!fileTypes.includes(fileEnd)) {
                $(this).val("");
                return alert("当前图片仅支持格式为：" + fileTypes.join(","))
            } else if (fileSize > 2097152) {
                $(this).val("");
                return alert("上传图片不得大于2M")
            } else {
                reader.addEventListener("load",function () {
                    $('#pic').attr("src", this.result);
                })
            }
        } else {
            return alert('图片路径获取失败,请重新上传')
        }
    });
    $(function (){
        $('#sex option[value="${sessionScope.user.sex}"]').attr('selected','selected');
    });
    $('#updateFrom').submit(function (){
        alert("更新成功");
    });
</script>
</html>
